<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="24" :xxl="16">
            <a-form-item label="区域">
              <a-row :gutter="5" type="flex">
                <a-col :span="3">
                  <a-select
                    placeholder="省"
                    v-model="queryParam.provinceCode"
                    @change="e => addressChange(e, 'cityOptions', 'province')"
                  >
                    <a-select-option v-for="item in provinceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="市"
                    v-model="queryParam.cityCode"
                    @change="e => addressChange(e, 'areaOptions', 'city')"
                  >
                    <a-select-option v-for="item in cityOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="区"
                    v-model="queryParam.areaCode"
                    @change="e => addressChange(e, 'streetOptions', 'area')"
                  >
                    <a-select-option v-for="item in areaOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="街道"
                    v-model="queryParam.streetCode"
                    @change="e => addressChange(e, '', 'street')"
                  >
                    <a-select-option v-for="item in streetOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="商家"
                    v-model="queryParam.businessId"
                    @change="e => agentChange(e, 'networkOptions', 'agentCode')"
                  >
                    <a-select-option v-for="item in agentOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="网点"
                    v-model="queryParam.networkId"
                    @change="e => agentChange(e, 'deviceOptions', 'networkCode')"
                  >
                    <a-select-option v-for="item in networkOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select placeholder="设备" v-model="queryParam.deviceId">
                    <a-select-option v-for="item in deviceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户手机">
              <a-input v-model="queryParam.phone" placeholder="请输入"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="主板ID">
                <a-input placeholder="请输入" v-model="queryParam.mainboardId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="流水ID">
                <a-input placeholder="请输入" v-model="queryParam.sequenceId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="订单ID">
                <a-input placeholder="请输入" v-model="queryParam.orderId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="支付订单号">
                <a-input v-model="queryParam.businessOrderId" placeholder="请输入"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="微信昵称">
                <a-input placeholder="请输入" v-model="queryParam.userName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="支付状态">
                <j-dict-select-tag
                  allowClear
                  noSelect
                  v-model="queryParam.paymentStatus"
                  placeholder="请选择"
                  dictCode="orderStatus"
                />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="支付方式">
                <j-dict-select-tag
                  allowClear
                  noSelect
                  v-model="queryParam.chargeType"
                  placeholder="请选择"
                  dictCode="chargeType"
                />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="支付时间">
                <a-range-picker allowClear class="per100" v-model="tempTimes" @change="timeChange" />
              </a-form-item>
            </a-col>
          </template>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator mt10">
      <a-button type="primary" icon="download" @click="handleExportXls('结算流水')">导出</a-button>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 2150 }"
      @change="handleTableChange"
    >
      <span slot="chargeType" slot-scope="text, record">
        <a-tag color="#1890FF" v-if="text === '0' || text === '3' || text === '7'">
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
        <a-tag color="#04de6d" v-else-if="text === '1' || text === '6'">
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
        <a-tag color="#000" v-else-if="text === '2'">
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
        <a-tag color="#722ed1" v-else-if="text === '4'">
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
        <a-tag color="#13c2c2" v-else-if="text === '5'">
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
        <a-tag color="#f5222d" v-else-if="text === '8'">
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
        <a-tag v-else>
          {{ filterDictText(chargeTypeOptions, text) }}
        </a-tag>
      </span>
      <span slot="paymentStatus" slot-scope="text, record">
        <a-tag color="green" v-if="text === '0' || text === '1'">{{
          filterDictText(paymentStatusOptions, text)
        }}</a-tag>
        <a-tag color="cyan" v-else-if="text === '2'">{{ filterDictText(paymentStatusOptions, text) }}</a-tag>
        <a-tag v-else-if="text === '3'">{{ filterDictText(paymentStatusOptions, text) }}</a-tag>
        <a-tag color="purple" v-else-if="text === '4'">{{ filterDictText(paymentStatusOptions, text) }}</a-tag>
        <a-tag color="red" v-else-if="text === '5' || text === '7'">{{
          filterDictText(paymentStatusOptions, text)
        }}</a-tag>
        <a-tag color="blue" v-else-if="text === '6'">{{ filterDictText(paymentStatusOptions, text) }}</a-tag>
        <a-tag v-else>{{ filterDictText(paymentStatusOptions, text) }}</a-tag>
      </span>
      <span slot="settlementAmount" slot-scope="text, record">
        {{ formatAmountFromFenToYuan(record.settlementAmount) }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button
          type="danger"
          @click="wechatUserRefund(record.id, 2)"
          :disabled="record.settlementAmount === 0 || (record.paymentStatus !== '2' && record.paymentStatus !== '6')"
          >退款</a-button
        >
      </span>
    </a-table>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import Api from '@/api/OrderManage/OrdersCash'
import { RefundMixin } from '@/mixins/Refund'
import { formatAmountFromFenToYuan } from '@/utils/util'

export default {
  name: 'OrdersCash',
  mixins: [JeecgListMixin, RefundMixin],
  data() {
    return {
      filterDictText,
      url: {
        list: Api.list,
        exportXlsUrl: '/business/settlement/exportXls'
      },
      columns: [],
      formatAmountFromFenToYuan,
      chargeTypeOptions: [],
      paymentStatusOptions: []
    }
  },
  created() {
    this.columns = [
      {
        title: '流水ID',
        dataIndex: 'sequenceId',
        fixed: 'left',
        align: 'center',
        width: 200,
        sorter: (a, b) => {
          return a.sequenceId - b.sequenceId
        }
      },
      {
        title: '订单ID',
        dataIndex: 'orderId',
        fixed: 'left',
        align: 'center',
        width: 200,
        sorter: (a, b) => {
          return a.orderId - b.orderId
        }
      },
      {
        title: '网点名称',
        align: 'center',
        dataIndex: 'networkName',
        sorter: (a, b) => {
          return a.networkName - b.networkName
        }
      },
      {
        title: '主板ID',
        dataIndex: 'mainboardId',
        align: 'center',
        width: 200,
        sorter: (a, b) => {
          return a.mainboardId - b.mainboardId
        }
      },
      {
        title: '用户/微信昵称',
        dataIndex: 'userName',
        align: 'center',
        width: 200,
        sorter: (a, b) => {
          return a.userName - b.userName
        }
      },
      {
        title: '支付方式',
        dataIndex: 'chargeType',
        width: 100,
        align: 'center',
        scopedSlots: { customRender: 'chargeType' },
        sorter: (a, b) => {
          return a.chargeType - b.chargeType
        }
      },
      {
        title: '实付金额',
        dataIndex: 'actualAmount',
        width: 120,
        align: 'center',
        sorter: (a, b) => {
          return a.actualAmount - b.actualAmount
        },
        customRender: (text, record, index) => {
          return formatAmountFromFenToYuan(text)
        }
      },
      {
        title: '结算金额',
        dataIndex: 'settlementAmount',
        width: 120,
        align: 'center',
        sorter: (a, b) => {
          return a.refundAmount - b.refundAmount
        },
        scopedSlots: { customRender: 'settlementAmount' }
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmount',
        width: 120,
        align: 'center',
        sorter: (a, b) => {
          return a.refundAmount - b.refundAmount
        },
        customRender: (text, record, index) => {
          return formatAmountFromFenToYuan(text)
        }
      },
      {
        title: '支付时间',
        dataIndex: 'paymentTime',
        width: 200,
        align: 'center',
        sorter: (a, b) => {
          return a.paymentTime - b.paymentTime
        }
      },
      {
        title: '支付订单号',
        dataIndex: 'businessOrderId',
        align: 'center',
        width: 230,
        sorter: (a, b) => {
          return a.businessOrderId - b.businessOrderId
        }
      },
      {
        title: '订单状态',
        dataIndex: 'paymentStatus',
        width: 120,
        fixed: 'right',
        align: 'center',
        scopedSlots: { customRender: 'paymentStatus' },
        sorter: (a, b) => {
          return a.paymentStatus - b.paymentStatus
        }
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        fixed: 'right',
        width: 150
      }
    ]
    this.getAddress('provinceOptions')
    this.initDictConfig()
  },
  methods: {
    // 初始化数据字典
    initDictConfig() {
      //初始化字典 - 支付方式
      initDictOptions('chargeType').then(res => {
        if (res.success) {
          this.chargeTypeOptions = res.result
        }
      })
      //初始化字典 - 订单状态
      initDictOptions('orderStatus').then(res => {
        if (res.success) {
          this.paymentStatusOptions = res.result
        }
      })
    },

    // 时间改变
    timeChange(e, arr) {
      if (arr[0]) {
        this.queryParam.startTime = arr[0]
        this.queryParam.endTime = arr[1]
      } else {
        this.queryParam.startTime = undefined
        this.queryParam.endTime = undefined
      }
    }
  }
}
</script>

<style scoped></style>

